<template>
	<view id="mui-player" :style="`height:${wrapHeight}px;`"></view>
</template>

<script>
	/*#ifdef H5*/
	import 'mui-player/dist/mui-player.min.css';
	/*#endif*/
	import MuiPlayer from 'mui-player'
	import videomuiPlayerVue from './videomuiPlayer.vue';
	export default {
		props: {
			src: {
				type: String,
				default: ''
			},
			poster: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				wrapHeight: ''
			};
		},
		methods: {
			initPlayer() {
				var mp = new MuiPlayer({
					container: '#mui-player',
					src: this.src,
					pageHead: false,
					objectFit: 'cover',
					autoFit: false,
					poster:this.poster
				})
			},
			getVideoWidth(fileUrl, offsetWidth) {
				let that = this
				uni.getVideoInfo({
					src: fileUrl,
					success(res) {
						let videoHeight = res.height
						let videoWidth = res.width
						that.wrapHeight = videoHeight / videoWidth * offsetWidth
					}
				})

			},
		},
		async mounted() {
			this.initPlayer()
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('#mui-player').boundingClientRect(data => {
					let offsetWidth = data.width
					this.getVideoWidth(this.src, offsetWidth)
				}).exec();
			})
		}
	}
</script>
<style lang="scss" scoped>
	#mui-player {
		z-index: 2;
		width: 100%;
		height: 100% !important;
	}
</style>